<template>
  <div class="table-form">
    <el-form ref="formRef" :model="form" :inline="true" class="pro-select-box">
      <el-form-item label="物料料号:" prop="materialNo">
        <el-input v-model="form.materialNo" clearable placeholder="物料料号" />
      </el-form-item>
      <el-form-item label="物料名称" prop="materialTypeId">
        <el-input
          v-model="form.materialName"
          clearable
          placeholder="物料名称"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <!-- <el-button type="primary" @click="output">导出</el-button> -->
        <el-button type="success" @click="add" v-permission="['material:add']"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <hcTable
      :table-data="list"
      :options="options"
      :columns="tableColumn"
      @size-change="handlerPageSize"
      @current-change="handlerPageIndex"
      @command="handleAction"
    >
      <template #materialType="{ row }">{{
        getMaterialType(row.materialType)
      }}</template>
      <template #img="{ row }">
        <el-image
          :src="parseImg(row.imgPath)[0]"
          style="width: 50%; max-height: 80%"
          :preview-src-list="parseImg(row.imgPath)"
          :preview-teleported="true"
        />
      </template>
    </hcTable>
    <addAndEdit :options="editOption" @closeDialog="closeDialog" />
  </div>
</template>

<script setup>
import { reactive, computed, ref, onMounted } from "vue";
import { getMaterial, deleteMaterial } from "@/api/specs";
import addAndEdit from "./dialog/addAndEdit.vue";
import { Material } from "@/store/editStore";
import getEnvConfig from "@/config/axios/getEnvConfig";

let baseUrl = getEnvConfig.VITE_BASE_URL.replace("api", "");

let form = reactive({
  materialNo: "",
  materialName: "",
});
let editOption = reactive({
  show: false,
  type: "add",
  data: {},
});
let tableColumn = [
  { type: "index", width: "60", label: "序号", align: "center", fixed: true },
  {
    prop: "materialType",
    label: "物料类型",
    align: "center",
    slot: "materialType",
    sortable: true,
  },
  {
    prop: "materialCode",
    label: "物料料号",
    align: "center",
    width: 200,
    showOverflowTooltip: true,
  },
  { prop: "materialName", label: "物料名称", align: "center" },
  { prop: "length", label: "物料长度", align: "center" },
  { prop: "width", label: "物料宽度", align: "center" },
  { prop: "height", label: "物料高度", align: "center" },
  { prop: "weight", label: "重量", align: "center", width: 60 },
  { prop: "colorSpot", label: "色点", align: "center", width: 60 },
  { prop: "diameter", label: "直径", align: "center", width: 60 },
  { prop: "size", label: "尺寸", align: "center", width: 60 },
  { prop: "thickness", label: "厚度", align: "center", width: 60 },
  { prop: "imgPath", label: "图片", align: "center", slot: "img" },
  {
    prop: "description",
    label: "描述",
    align: "center",
    showOverflowTooltip: true,
  },
  {
    width: "120",
    label: "操作",
    align: "center",
    buttons: [
      {
        name: "编辑",
        type: "warning",
        command: "edit",
        permission: ["material:edit"],
      },
      {
        name: "删除",
        type: "danger",
        command: "delete",
        permission: ["material:delete"],
      },
    ],
  },
];

let list = ref([]);
let loading = ref(false);
let total = ref(0);
let page = reactive({
  pageSize: 10,
  pageIndex: 1,
});

const params = computed(() => {
  return {
    ...form,
    ...page,
  };
});
const options = computed(() => {
  return {
    loading: loading.value,
    showPagination: true,
    rowKey: "id",
    defaultExpandAll: false,
    border: true,
    paginationConfig: {
      total: total.value,
      currentPage: page.pageIndex,
      pageSize: page.pageSize,
    },
  };
});

onMounted(async () => {
  query();
});

function query() {
  page.pageIndex = 1;
  getTable();
}

function parseImg(path) {
  let imgs = path
    ? path
        .split(",")
        .filter((i) => !!i)
        .map((i) => baseUrl + i)
    : [];
  return imgs;
}

async function getTable() {
  loading.value = true;
  list.value = [];
  let res = await getMaterial(params.value);
  list.value = res.items || [];
  total.value = res.totalCount || 0;
  loading.value = false;
}

// 表请求条数改变
const handlerPageSize = (pageSize) => {
  page.pageSize = pageSize;
  page.pageIndex = 1;
  getTable();
};
// 表格页数改变
const handlerPageIndex = (pageIndex) => {
  page.pageIndex = pageIndex;
  getTable();
};

const handleAction = (command, row) => {
  switch (command) {
    case "edit":
      handlerEdit(row);
      break;
    case "delete":
      handlerDel(row.id);
      break;
    default:
      break;
  }
};

function handlerEdit(row) {
  editOption.show = true;
  editOption.type = "edit";
  editOption.data = row;
}

function handlerDel(id) {
  ElMessageBox.confirm(`是否确认删除该物料?`, "提示", {
    confirmButtonText: "确 定",
    cancelButtonText: "取 消",
    type: "warning",
  })
    .then(async () => {
      let res = await deleteMaterial([id]);
      if (res) {
        ElMessage.success("删除成功");
        getTable();
      }
    })
    .catch(() => {
      return false;
    });
}

function closeDialog(val) {
  editOption.show = false;
  val && getTable();
}

function add() {
  editOption.show = true;
  editOption.type = "add";
  editOption.data = [];
}

function getMaterialType(type) {
  return Material.find((item) => item.code === type)?.label;
}
</script>

<style lang="scss" scoped></style>
